<script setup>
import { onMounted, reactive, ref } from 'vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router';
import { uploadUserImg, getBlindPosts } from '@/api/User'
import useUserStore from '@/store/user';

import { showFailToast, showSuccessToast } from 'vant';
import { getStorage, setStorage } from '@/utils/localStorage';

const userStore = useUserStore();
const router = useRouter();

// 保存盲人所发的帖子
let posts = ref([])

// 加载效果
const loading = ref(false)

// 是否加载完毕
const finished = ref(false)


const buttonVars = reactive({
    // --van-button-large-height
    buttonLargeHeight: '40vh',
    buttonPrimaryBackground: '#47e',
    // -van-button-default-font-size
    buttonDefaultFontSize: '10vw'
})

const buttonVars2 = reactive({
    // --van-button-large-height
    buttonLargeHeight: '43vh',
    buttonPrimaryBackground: '#447e',
    // -van-button-default-font-size
    buttonDefaultFontSize: '10vw'
})

function clickToCall() {
    router.push({ name: 'showMyPosts' });
}

const afterRead = async (file) => {
    const formData = new FormData();
    formData.append('file', file.file);

    // console.log(file.file.size > 1024 * 1024)
    if (file.file.size > 1024 * 1024) {
        // 上传失败
        // 图片体积过大
        showFailToast('图片体积过大，请上传小于1M的图片');
    } else {
        await uploadUserImg(userStore.userInfo.userid, formData)
        showSuccessToast('发布成功');
        router.push({ name: 'showMyPosts' });
    }
};



onBeforeRouteLeave(() => {
    // 保存滚动条位置
    setStorage('scrollTop', window.scrollY)
})

onMounted(async () => {
    if (userStore.userInfo.types === 1) {
        // 志愿者端展示效果
        const { data } = await getBlindPosts()
        if (data != null) {
            posts.value = data
            finished.value = true
            userStore.userInfo.postsList = data
        }

        const scrollTop = getStorage('scrollTop')
        if (scrollTop) {
            setTimeout(() => {
                window.scrollTo(0, parseInt(scrollTop))
            }, 900);
        }
    }
})

</script>

<template>
    <section>
        <van-nav-bar title="视界共享" fixed placeholder safe-area-inset-top />
    </section>
    <!-- 盲人端展示效果 -->
    <div style="padding: 0 10px;" v-if="userStore.userInfo.types === 0">
        <van-config-provider :theme-vars="buttonVars">
            <van-uploader :after-read="afterRead">
                <van-button style="width: 95vw;" block type="primary" size="large">上传图片</van-button>
            </van-uploader>
        </van-config-provider>

        <van-config-provider :theme-vars="buttonVars2">
            <div style="margin-top: 5px;">
                <van-button block type="primary" size="large" @click="clickToCall">查看我的</van-button>
            </div>
        </van-config-provider>
    </div>

    <!-- 志愿者端展示效果 -->
    <div v-else>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            error-text="加载失败，点击重新加载">
            <van-cell v-for="post in posts" :key="post.postId"
                @click="() => router.push({ name: 'postDetail', params: { postId: post.postId } })">
                <img :src="post.imageUrl" alt="帖子图片" class="post-image">
                <div class="post-info">
                    <span class="post-username">{{ post.username }}</span>
                    <span class="post-created-at">{{ post.createdAt }}</span>
                </div>
            </van-cell>
        </van-list>
    </div>
</template>

<style scoped>
.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-info {
    margin-top: 10px;
}

.post-username {
    margin-right: 10px;
    font-weight: bold;
}

.post-created-at {
    color: #999;
}
</style>